<template>
  <!-- 输入框 -->
  <el-input v-if="type==='input'" @click.stop clearable v-model="defaultValue" style="width: 100%"
    :maxlength="maxlength" placeholder="请输入" @keyup.enter="filterChangeFn()" @blur="filterChangeFn()"
    @clear="filterChangeFn()" />
  <!-- 单选框 -->
  <el-select clearable filterable v-if="type==='select'" v-model="defaultValue" placeholder="请选择" style="width: 100%"
    @change="filterChangeFn()">
    <el-option v-for="item in options" :key="item.value" :label="item[label]" :value="item[value]" />
  </el-select>
  <!-- 多选框 -->
  <el-select multiple clearable filterable ref="selectRef" v-if="type==='checkbox'" v-model="defaultValue"
    placeholder="请选择" style="width: 100%" @remove-tag="filterChangeFn()" @visible-change="visibleChangeFn()"
    popper-class="custom-popper-with-select">
    <el-option v-for="item in options" :key="item.value" :label="item[label]" :value="item[value]" />
    <div class="select-button-wrapper">
      <el-button type="common" size="small" @click="selectRef.dropMenuVisible=false">取消</el-button>
      <el-button type="primary" size="small" @click="selectRef.dropMenuVisible=false">确认</el-button>
    </div>
  </el-select>
</template>
<script setup lang="ts">
  const emit = defineEmits(['update:modelValue', 'filterChange'])
  const props = defineProps({
    modelValue: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'input',
      required: true
    },
    maxlength: {
      type: Number,
      default: 200
    },
    options: {
      type: Array,
      default: [],
      required: true
    },
    label: {
      type: String,
      default: 'label',
    },
    value: {
      type: String,
      default: 'value',
    }
  })

  const defaultValue = ref(props.modelValue)
  const selectRef = ref()

  const type = computed(() => {
    return props.type
  })

  const options = computed(() => {
    return props.options
  })

  watch(
    () => props.modelValue,
    (value) => {
      defaultValue.value = value
    },
    {
      immediate: true,
      deep: true
    }
  )

  const filterChangeFn = () => {
    emit('update:modelValue', isRef(defaultValue) ? unref(defaultValue) : defaultValue)
    emit('filterChange')
  }

  const visibleChangeFn = (visible) => {
    if (visible) {
      return
    }
    filterChangeFn()
  }
</script>
<style lang="scss" scoped>
  ::v-deep.el-select {
    overflow: hidden;
  }

  ::v-deep.el-select .el-input {
    height: 32px;
  }

  ::v-deep.el-select .el-select__input {
    display: none !important;
  }

  ::v-deep.el-select .el-select-tags-wrapper {
    display: flex;
    height: 28px;
    overflow: hidden;
  }

  ::v-deep input::-webkit-input-placeholder {
    text-align: left
  }

  ::v-deep input {
    text-align: left
  }
  /* 为el-input组件内的输入框设置统一高度 */
  ::v-deep(.el-input__wrapper) {
    height: 32px;
    line-height: 32px;
  }
  ::v-deep(.el-input__inner) {
    height: 32px;
    line-height: 32px;
  }
</style>
<style lang="scss">
  .custom-popper-with-select .el-scrollbar {
    padding-bottom: 40px !important;

    .select-button-wrapper {
      width: calc(100% - 16px);
      display: flex;
      justify-content: flex-end;
      position: absolute;
      bottom: 0;
      margin: 0 8px;
      padding: 8px 0;
      border-top: 1px dashed #ccc;
    }
  }
</style>
